<template>
  <el-dialog
    :visible="dialogVisible"
    :before-close="handleCancel"
    :close-on-click-modal="false"
    width="450px"
    title="批量转移"
    append-to-body>

    <el-form label-width="80px">
      <el-form-item label="选择负责人">
        <wk-user-select
          v-model="selectedUser"
          :request="queryUserListAPI"
          :params="{ pageType: 0 }"
          radio
          style="width: 100%" />
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button @click="handleCancel">
        取消
      </el-button>
      <el-button
        type="primary"
        @click="handleConfirm">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * Create by yxk at 2020/6/20
 */
import { jxcFieldTransferOwnerAPI } from '@/api/jxc/field'
import { userListAPI } from '@/api/common'

import WkUserSelect from '@/components/NewCom/WkUserSelect'

import jxcTypes from '../jxcTypes'

export default {
  name: 'TransferOwner',
  components: {
    WkUserSelect
  },
  props: {
    type: {
      type: String,
      required: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: true,
      selectedUser: '',

      loading: false
    }
  },
  computed: {
    /**
     * 类型
     */
    typeObj() {
      return jxcTypes[this.type]
    },
    queryUserListAPI() {
      return userListAPI
    }
  },
  methods: {
    handleCancel() {
      this.dialogVisible = false
      this.$emit('close')
    },

    handleConfirm() {
      if (!this.selectedUser) {
        this.$message.error('请选择负责人')
        return
      }
      if (this.loading) return
      this.loading = true
      jxcFieldTransferOwnerAPI({
        ids: this.list.map(o => o[this.typeObj.primaryKey]).join(','),
        label: this.typeObj.label,
        userId: this.selectedUser
      }).then(() => {
        this.loading = false
        this.$message.success('转移成功')
        this.$emit('update')
        this.handleCancel()
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-dialog__body {
  padding: 20px;
}
</style>
